<template>
  <div class="container">
    <!-- <div class="box">
      <header class="header">header</header>
      <div class="content">content</div>
    </div> -->
    <transition name="fade">
      <router-view></router-view>
    </transition>
    <footer class="footer" v-if="!$route.meta.hidden">
      <ul>
        <!-- router-link 默认会渲染为 a 标签
        使用tag属性设置 转换的标签 -->
        <router-link to="/home" tag="li">
          <span class="iconfont icon-shouye"></span>
          <p>首页</p>
        </router-link>
        <router-link to="/kind" tag="li">
          <span class="iconfont icon-leimupinleifenleileibie"></span>
          <p>分类</p>
        </router-link>
        <router-link to="/cart" tag="li">
          <span class="iconfont icon-shopping-cart"></span>
          <p>购物车{{ isLogin && totalNum > 0 ? totalNum : ''}}</p>
        </router-link>
        <router-link v-if="isLogin" to="/user" tag="li">
          <span class="iconfont icon-wode"></span>
          <p>我的</p>
        </router-link>
        <router-link v-else to="/login" tag="li">
          <span class="iconfont icon-wode"></span>
          <p>未登录</p>
        </router-link>
      </ul>
    </footer>
    <div class="tip">请将屏幕竖向浏览</div>
  </div>
</template>
<script>
import { mapState, mapGetters, mapActions, mapMutations } from 'vuex'
// 组件中获取状态管理器的状态可以使用计算属性
export default {
  methods: { // 2.页面的刷新，导致数据的重置，获取最新的数据
    ...mapActions({
      getCartListAction: 'cart/getCartListAction'
    }),
    ...mapMutations({
      changeCartList: 'cart/changeCartList'
    })
  },
  mounted () { // 3.获取实时的购物车中的数据
    this.getCartListAction({ userid: localStorage.getItem('userid') }).then(res => {
      if (res.data.code === '10020') {
        this.changeCartList([])
      } else {
        this.changeCartList(res.data.data)
      }
    })
  },
  computed: {
    // isLogin () {
    //   return this.$store.state.user.isLogin
    // }
    // ... 扩展运算符其实代表的就是合并对象
    // computed 是一个对象，还可以写其他的自定义的计算属性
    ...mapState({ // 使用mapState辅助函数获取状态管理器中的状态，结合 扩展运算符完成
      isLogin: state => state.user.isLogin

    }),
    // 1.获取购物车中的数量
    ...mapGetters({
      totalNum: 'totalNum'
    })
  }
}
</script>

<style lang="stylus">
*
  padding 0
  margin 0
  list-style none

html
  // font-size 100px // 所有的平台展示效果都一样，header 的高度都为44px
  font-size 26.666666667vw // iphone6的尺寸是一致的，其余机型的尺寸自动适配的
  // 为什么是 26.666666667vw
  // iphone6 750 * 1334 ===> 375 * 667 ==>  100 / 375 * 100
  // 把100 进行375 等分，每一块的基准值的大小为 100px

// 如果屏幕的宽度大于某一个值时，就不要再使用vw布局了，使用px布局
@media screen and (min-width 675px)
  html
    font-size 100px
body
  font-size 14px

html, body, .container
  width 100%
  height 100%
// 弹性盒布局，不建议使用固定定位布局
.container
  display flex
  max-width 675px
  margin 0 auto
  flex-direction column
  .box
    flex 1
    overflow auto
    display flex
    flex-direction column
    .header
      height 0.44rem
      background-color #f66
    .content
      flex 1
      overflow auto
  .footer
    height 0.5rem
    background-color #efefef
    ul
      height 100%
      display flex
      li
        flex 1
        height 100%
        display flex
        justify-content center
        align-items center
        flex-direction column
        // & 代表的是 router-link-active 同时是li的样式
        &.router-link-active
          color #f66
        span
          font-size 24px
        p
          font-size 12px

.tip
  position fixed
  top 0
  left 0
  right 0
  bottom 0
  background-color rgba(0, 0, 0, 0.9)
  color #fff
  font-size 50px
  display none
  justify-content center
  align-items center
// 利用媒体查询判断当前是横屏还是竖屏
@media screen and (orientation landscape) // 横屏  portrait 竖屏
  .tip
    display flex

.fade-enter
  opacity 0
.fade-enter-active
  transition all .5s
.fade-enter-to
  opacity 1
.fade-leave
  opacity 1
.fade-leave-active
  transition all 0s
.fade-leave-to
  opacity 0
</style>
